<template>
    <div class="container">
        <div class="notice" v-if="stateData">
            <div class="item" style="justify-content: center; text-align: center">
                <span class="date">{{ stateData.AddDate }}</span>
            </div>
            <div class="item">
                <div class="child">
                    <img src="../img/fengji.png" />
                    <div class="status">
                        <span class="title">
                            风机&nbsp;
                            <span>{{ stateData.g50301_Rtd == 0 ? '运行终止' : '正常运行' }}</span>
                        </span>
                        <div class="progress">
                            <div style="width: 100%">
                                <dv-percent-pond
                                    :config="g50301config"
                                    style="width: 100%; height: 30px"
                                />
                            </div>
                            <!-- <span class="state">
                                {{ stateData.g50301_Rtd == 0 ? '关' : '开' }}
                            </span> -->
                        </div>
                    </div>
                </div>
                <div class="child">
                    <img src="../img/jianhua.png" />
                    <div class="status">
                        <span class="title">
                            净化器&nbsp;
                            <span>{{ stateData.g50501_Rtd == 0 ? '运行终止' : '正常运行' }}</span>
                        </span>
                        <div class="progress">
                            <div style="width: 100%">
                                <dv-percent-pond
                                    :config="g50501config"
                                    style="width: 100%; height: 30px"
                                />
                            </div>
                            <!-- <span class="state">
                                {{ stateData.g50501_Rtd == 0 ? '关' : '开' }}
                            </span> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- <dv-decoration-2 style="width: 100%; height: 5px" dur="6" /> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()

    setInterval(function () {
        getData()
    }, 60 * 1000)

    setInterval(() => {
        progress()
    }, 100)

    nextTick(() => {
        emits('finish')
    })
})
const emits = defineEmits(['finish'])
const stateData = ref()
const online = ref(0)
const step = ref(0)
const direction = ref(0)

const progress = () => {
    if (online.value == 0) {
        step.value = 50
        direction.value = 0
        return
    }
    if (direction.value == 0) {
        if (step.value >= 100) {
            step.value -= 5
            direction.value = 1
        } else {
            step.value += 5
        }
    } else {
        if (step.value <= 0) {
            step.value += 5
            direction.value = 0
        } else {
            step.value -= 5
        }
    }
}

const g50301config = computed(() => {
    return {
        textColor: 'rgba(0, 0, 0, 0)',
        value: step.value,
        colors: stateData.value.g50301_Rtd == 0 ? ['#626262', '#626262'] : ['#096dd9', '#096dd9'],
        borderWidth: 2,
        borderRadius: 2,
        localGradient: false,
        borderGap: 5,
    }
})

const g50501config = computed(() => {
    return {
        textColor: 'rgba(0, 0, 0, 0)',
        value: step.value,
        colors: stateData.value.g50501_Rtd == 0 ? ['#626262', '#626262'] : ['#096dd9', '#096dd9'],
        borderWidth: 2,
        borderRadius: 2,
        localGradient: false,
        borderGap: 5,
    }
})

const getData = async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getlastrecord?mid=${mid}`)
        if (res.status === 0) {
            if (res.data) {
                stateData.value = res.data
                online.value = res.online
            } else {
                ElMessage({
                    type: 'info',
                    message: '测点无资料或未连接',
                })
                //ElMessageBox.alert('测点无资料或未连接','提示',{confirmButtonText: '确定',});
            }
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .notice {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 10px 16px;

        .item {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            height: 50%;

            .date {
                color: #096dd9;
                font-weight: bold;
                font-size: 36px;
            }

            .child {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 50%;

                .status {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: 10px;
                    height: 100%;

                    .title {
                        color: #b8e6ff;
                        font-size: 16px;
                    }

                    .progress {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .state {
                            color: #b8e6ff;
                            font-size: 12px;
                            line-height: 20px;
                            margin-left: 5px;
                        }
                    }
                }
            }

            img {
                width: 40px;
                height: auto;
            }
        }
        .item:first-child {
            border-bottom: 1px solid #173e5d;
        }
    }
}
</style>
